<template>
  <div class="ScrollFont">
    <h1 class="ended">{{ msg }}</h1>
  </div>
</template>
<script setup lang="ts">
import {onMounted} from "vue";

defineProps({
  msg: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  let h1:any = document.querySelector("h1")
  h1.innerHTML = h1.textContent.replace(/\S/g, "<span class='spa'>$&</span>")
  let delay = 0
  document.querySelectorAll(".spa").forEach((span: any, index: any) => {
    delay += 0.2
    if (index === 11) delay += 0.7
    span.style.setProperty('--delay', `${delay}s`)

  })
  h1.addEventListener('animationend', (e) => {
    if (e.target === document.querySelector('h1 span:last-child')) {
      h1.classList.add('ended')
    }
  })
})
</script>
<style lang="scss">
.ScrollFont h1 {
  font-size: 35px;
  font-family: monospace, sans-serif;
  position: relative;
  height: 35px;
}

.ScrollFont h1::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 50px;
  bottom: 0px;
  background-color: #000;
  border-radius: 2px;
  right: -10px;
}

.ScrollFont h1.ended::after {
  animation: 1.1s cursor steps(2, jump-none) infinite;
}

@keyframes cursor {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ScrollFont h1 span {
  --delay: 10s;
  display: inline-block;
  overflow: hidden;
  width: 0ch;
  font-weight: 700;
  //text-shadow: 0 0 2px #afb1ce, 0 0 2px #51ab62, 0 0 2px #96a135, 0 0 3px #11e191;
  background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat; /*设置线性渐变*/
  -webkit-background-size: 160px; /*设置背景大小*/
  -webkit-background-clip: text; /*背景被裁剪到文字*/
  -webkit-text-fill-color: rgba(0, 0, 0, 0.3); /*设置文字的填充颜色*/
  animation: 0.1s text-in ease-in-out forwards, shine 3s infinite ;
  animation-delay: var(--delay);
}

@keyframes text-in {
  from {
    width: 0ch;
  }
  to {
    width: 2ch;
  }
}

@-webkit-keyframes shine { /*创建动画*/
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

</style>